<template>
    <div>
        <!-- <div @click="choseAdd()">
            <input type="text" v-model="textname" placeholder="请选择地区" readonly="readonly">
        </div> -->
       <!--居住地址三级联动选项-->
        <section class="showChose" v-show="showChose" @click="closeAdd()"></section>
        <section class="address">
            <!-- <section class="title">
                <h4>居住地址</h4>
                <span @click="closeAdd()">×</span>
            </section> -->
            <section class="choose_title">
                <div class="area" @click="provinceSelected()" :class="Province?'':'active'">{{Province?Province:'请选择'}}</div>
                <div class="area" @click="citySelected()" :class="City?'':'active'" v-show="Province">{{City?City:'请选择'}}</div>
                <div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">{{District?District:'请选择'}}</div>
                <div class="area" @click="townSelected()" :class="Town?'':'active'" v-show="District">{{Town?Town:'请选择'}}</div>
                <span class="choose_guanbi clear" @click="closeAdd()"><i class="iconfont icon-cuo fr"></i></span>
            </section>
            <ul>
                <li class="addList" v-for="(v,k) in info" @click="getProvinceId(v.id,v.city_id, v.city_name, k)" v-show="showProvince" :class="v.selected ? 'active' : ''">{{v.city_name}}</li>
                <li class="addList" v-for="(v,k) in showCityList" @click="getCityId(v.id,v.city_id, v.city_name, k)" v-show="showCity" :class="v.selected ? 'active' : ''">{{v.city_name}}</li>
                <li class="addList" v-for="(v,k) in showDistrictList" @click="getDistrictId(v.id,v.city_id, v.city_name, k)" v-show="showDistrict" :class="v.selected ? 'active' : ''">{{v.city_name}}</li>
                <li class="addList" v-for="(v,k) in showTownList" @click="getTownId(v.id,v.city_id, v.city_name, k)" v-show="showTown" :class="v.selected ? 'active' : ''">{{v.city_name}}</li>
            </ul>
        </section>
        
    </div>
</template>

<script>
// import area from "@/data/area.js";

export default {
  name: 'myAddress',
  data () {
    return {
      textname: '',
      showChose: true,
      showProvince: true,
      showCity: false,
      showDistrict: false,
      showTown: false,
      showCityList: false,
      showDistrictList: false,
      showTownList: false,
      province: 5,
      city: 3,
      district: 57,
      town: 114,
      GetProvinceId: 2,
      District: false,
      Province: false,
      City: false,
      Town: false,
      // v-for循环判断是否为当前
      selected: false,
      info: []
    }
  },
  mounted() {
    // this.info = area;
    	this.getAdressList();
  },
  methods: {
    getAdressList (pkey) {
      this.$fetch(this.$path + '/api.php/circle/getAdressList',{pkey:'province'}).then((response) => {
        console.log('查询地区列表-省份列表',response);
        if(response.code == 200) {
          this.info = response.data;
        }
      })
    },
    // choseAdd: function() {
    //   // this.showChose = true;
    // },
    closeAdd: function() {
      // this.showChose = false;
      this.$emit('done');
    },
    _filter(add,city_name,code) {
      let result = [];
      for(let i=0;i<add.length;i++) {
        if(code == add[i].id){
          result = add[i][city_name];
        }
      }
      return result;
    },
    getProvinceId: function(adId,code,input,index,pkey) {
      this.province = code;
      this.Province = input;
      this.showProvince=false;
      this.showCity=true;
      this.showDistrict = false;
      this.showTown = false;
      this.showCityList = this._filter(this.info,'city',this.province);
      // 点击选择当前
      this.info.map( a => a.selected = false );
      this.info[index].selected = true;

      this.$fetch(this.$path + '/api.php/circle/getAdressList',{pkey:code}).then((response) => {
        console.log('获取城市列表--组件',response);
        if(response.code == 200) {
          this.showCityList = response.data;
        }
      })
    },
    provinceSelected: function() {
      // 清除市级和区级列表
      this.showCityList = false;
      this.showDistrictList = false;
      this.showTownList = false;
      // 清除市级和区级选项
      this.City = false;
      this.District = false;
      this.Town = false;
      // 选项页面的切换
      this.showProvince = true;
      this.showCity = false;
      this.showDistrict = false;
      this.showTown = false;
    },
    getCityId: function(adId,code, input, index) {
      this.city = code;
      this.City = input;
      this.showProvince=false;
      this.showCity=false;
      this.showDistrict = true;
      this.showTown = false;
      this.showDistrictList = this._filter(this.showCityList,'district',this.city);
      // 选择当前添加active
      this.showCityList.map( a => a.selected = false );
      this.showCityList[index].selected = true;
      
      this.$fetch(this.$path + '/api.php/circle/getAdressList',{pkey:code}).then((response) => {
        console.log('获取地区列表--组件',response);
        if(response.code == 200) {
          this.showDistrictList = response.data;
        }
      })
    },
    citySelected: function() {
      this.showProvince=false;
      this.showCity=true;
      this.showDistrict = false;
      this.showTown = false;
    },
    getDistrictId: function(adId,code, input, index) {
      this.district = code;
      this.District = input;
      this.showProvince=false;
      this.showCity=false;
      this.showDistrict = false;
      this.showTown = true;
      this.showTownList = this._filter(this.showDistrictList,'town',this.district);
      // 选择当前添加active
      this.showDistrictList.map( a => a.selected = false );
      this.showDistrictList[index].selected = true;

      this.$fetch(this.$path + '/api.php/circle/getAdressList',{pkey:code}).then((response) => {
        console.log('获取城镇列表--组件',response);
        if(response.code == 200) {
          this.showTownList = response.data;
        }
      })
      // 选取区县选项之后关闭弹层
    },
    districtSelected: function() {
      this.showProvince=false;
      this.showCity=false;
      this.showDistrict = true;
      this.showTown = false;
    },
    //选择镇
    getTownId: function(adId,code, input, index) {
      this.town = code;
      this.Town = input;
      // 选择当前添加active
      this.showTownList.map( a => a.selected = false );
      this.showTownList[index].selected = true;
      // 选取镇选项之后关闭弹层
      // this.showChose = false;
        this.textname = this.Province + this.City + this.District + this.Town;
        this.$emit('textname',this.textname);    
        this.$emit('textnames',this.Town);    
        this.$emit('textnameId',adId);    
    },
    townSelected: function() {
      this.showProvince=false;
      this.showCity=false;
      this.showDistrict = false;
      this.showTown = true;
    },
  },
}
</script>

<style>
.myAddress{
  width: 100%;
  background-color: white;
  border-top: 4px solid rgba(245,245,245,1);
  color:#333;
}
.myAddress .cont{
  border-bottom: 1px solid rgba(245,245,245,0.8);
}
.myAddress .cont span{
  display: inline-block;
  font-size: 0.28rem;
  color: #333;
  line-height: 0.88rem;
  margin-left: 0.32rem;
}
.myAddress .cont section{
  float:left;
}
.myAddress .cont p{
  display: inline-block;
  font-size: 0.28rem;
  color: #333333;
  line-height: 0.88rem;
  margin-left: 1rem;
}
.myAddress .cont .pic2{
  float: right;
  width: 0.14rem;
  height: 0.24rem;
  margin: 0.32rem 0.32rem 0.32rem 0;
}
.myAddress .cont p.text{
  margin-left: 0.72rem;
}
.showChose{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:120;
  background:rgba(0,0,0,0.5);
}
.address{
  position:absolute;
  bottom:0;
  left:0;
  z-index:121;
  background:#fff;
  width:100%;
}
.address .choose_title {
    text-align: left;
    height: 1rem;
    border-bottom: 1px solid #d8d8d8;
}
.title h4{
  display:inline-block;
  margin-left:3.2rem;
  font-size:0.32rem;
  line-height:0.88rem;
  font-weight:normal;
  color:#999;
}
.title span{
  margin:0.42rem 0 0 2.2rem;
  font-size:0.45rem;
  line-height:0.34rem;
  color:#D8D8D8;
}
.area{
  display:inline-block;
  font-size:0.28rem;
  line-height: 1rem;
  vertical-align: top;
  margin-left:0.32rem;
  color:#333;
  width: 1.14rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
.choose_title .active {
  border-bottom: 0.032rem solid #e50838;
  color: #e50838;
  margin-top: -0.02rem;
}
.addList{
  width:100%;
  padding-left:0.32rem;
  font-size:0.26rem;
  line-height:0.66rem;
  color:#333;
}
.choose_guanbi {
  line-height: 1rem;
}
.choose_guanbi .icon-cuo{
  font-size: 0.26rem;
  color: #999;
  margin-top: -1rem;
  padding: 0 0.4rem;
}

/* 修改的格式 */
.address ul{
  width:100%;
  height:100%;
  max-height: 4.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  min-height: 5rem;
}
.address .title .active{
  color:#0071B8;
  border-bottom:0.02rem solid #0071B8;
}
.address ul .active{
  color:#0071B8;
}
</style>